<div id="list" class="pure-u-1">
  <div class="email-item pure-g" (click)="setItem(1)" [class.email-item-selected]="item == 1" [class.email-item-unread]="item == 1">
    <div class="pure-u">
      <img width="64" height="64" alt="Tilo Mitra&#x27;s avatar" class="email-avatar" src="assets/img/common/tilo-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Tilo Mitra</h5>
      <h4 class="email-subject">Hello from Toronto-{{type}}</h4>
      <p class="email-desc">
        Hey, I just wanted to check in with you from Toronto. I got here earlier today.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(2)" [class.email-item-selected]="item == 2" [class.email-item-unread]="item == 2">
    <div class="pure-u">
      <img width="64" height="64" alt="Eric Ferraiuolo&#x27;s avatar" class="email-avatar" src="assets/img/common/ericf-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Eric Ferraiuolo</h5>
      <h4 class="email-subject">Re: Pull Requests</h4>
      <p class="email-desc">
        Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(3)" [class.email-item-selected]="item == 3" [class.email-item-unread]="item == 3">
    <div class="pure-u">
      <img width="64" height="64" alt="YUI&#x27;s avatar" class="email-avatar" src="assets/img/common/yui-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">YUI Library</h5>
      <h4 class="email-subject">You have 5 bugs assigned to you</h4>
      <p class="email-desc">
        Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(4)" [class.email-item-selected]="item == 4" [class.email-item-unread]="item == 4">
    <div class="pure-u">
      <img width="64" height="64" alt="Reid Burke&#x27;s avatar" class="email-avatar" src="assets/img/common/reid-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Reid Burke</h5>
      <h4 class="email-subject">Re: Design Language</h4>
      <p class="email-desc">
        Excepteur sint occaecat cupidatat non proident, sunt in culpa.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(5)" [class.email-item-selected]="item == 5" [class.email-item-unread]="item == 5">
    <div class="pure-u">
      <img width="64" height="64" alt="Andrew Wooldridge&#x27;s avatar" class="email-avatar" src="assets/img/common/andrew-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Andrew Wooldridge</h5>
      <h4 class="email-subject">YUI Blog Updates?</h4>
      <p class="email-desc">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(6)" [class.email-item-selected]="item == 6" [class.email-item-unread]="item == 6">
    <div class="pure-u">
      <img width="64" height="64" alt="Yahoo! Finance&#x27;s Avatar" class="email-avatar" src="assets/img/common/yfinance-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Yahoo! Finance</h5>
      <h4 class="email-subject">How to protect your finances from winter storms</h4>
      <p class="email-desc">
        Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
      </p>
    </div>
  </div>

  <div class="email-item pure-g" (click)="setItem(7)" [class.email-item-selected]="item == 7" [class.email-item-unread]="item == 7">
    <div class="pure-u">
      <img width="64" height="64" alt="Yahoo! News&#x27; avatar" class="email-avatar" src="assets/img/common/ynews-avatar.png">
    </div>

    <div class="pure-u-3-4">
      <h5 class="email-name">Yahoo! News</h5>
      <h4 class="email-subject">Summary for April 3rd, 2012</h4>
      <p class="email-desc">
        We found 10 news articles that you may like.
      </p>
    </div>
  </div>
</div>
